<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内边距</title>
    <style>
        .box1{
            width:200px;
            height:200px;
            background-color: chartreuse;
            border:10px darkorange dashed;
        /*
        1、padding：内容区和边框之间的距离
        2、4个方向：
        padding-top 
        padding-right 
        padding-buttom 
        padding-left
        3、内边距的设置会影响到盒子的大小
        4、背景颜色会延伸到内边距上
        5、一个盒子可见框的大小：由内容区、内边距和边框共同组成的，
        所以在计算盒子大小时，必须将这3个区域加到一起计算
        6、padding是内边距的简写属性，可以同时指定4各方向的内边距，规则和border-width一样
        */
            padding-top:100px;
            padding-right:100px;
            padding-bottom:100px;
            padding-left:100px;

        }
        .inner{
            width:100%;
            height:100%;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div class="box1">
        <!--inner会把内容区撑开-->
        <div class="inner"></div>
    </div>
    
</body>
</html>